<template>
  <div class="suggest-container">
    <el-row :gutter="20">
      <el-col :span="19" :xs="24" :sm="19">
        <div class="rank_wrap">
          <div class="config_box">
            <div class="config_box">
              <div class="top_config">
                <div class="config_search">
                  <!--  <input type="text" maxlength="20" placeholder="输入分数"> -->
                  <el-input
                    v-model="score"
                    maxlength="3"
                    placeholder="输入分数"
                  ></el-input>
                  <div class="check_btn" @click="handleSearchBtn()">查询</div>
                </div>
                <div class="config_item">
                  <div class="item_left">区域</div>
                  <div class="item_right">
                    <div
                      v-for="item in provideList"
                      :key="item.province_id"
                      @click="provideListClick(item)"
                      class="right_btn_item"
                    >
                      <span
                        :class="
                          queryParams.province_id == item.province_id
                            ? 'active'
                            : ''
                        "
                      >
                        {{ item.name }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="config_item">
                  <div class="item_left">年份</div>
                  <div class="item_right">
                    <div
                      v-for="item in yearsList"
                      :key="item.id"
                      @click="yearsListClick(item)"
                      class="right_btn_item"
                    >
                      <span
                        :class="queryParams.year == item.id ? 'active' : ''"
                      >
                        {{ item.label }}
                      </span>
                    </div>
                  </div>
                </div>
                <template v-if="selectMajorList">
                  <div class="config_item">
                    <div class="item_left">科目</div>
                    <div class="item_right" v-if="majorType != 3">
                      <div
                        v-for="item in selectMajorList.options[0].subjects"
                        :key="item"
                        @click="subjectListClick(item)"
                        class="right_btn_item"
                      >
                        <span
                          :class="queryParams.subject === item ? 'active' : ''"
                        >
                          {{ item }}
                        </span>
                      </div>
                    </div>
                    <div class="item_right" v-else>
                      <div
                        @click="subjectListClick('综合')"
                        class="right_btn_item"
                      >
                        <span class="active"> 综合 </span>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="config_item">
                  <div class="item_right">
                    <span
                      v-for="item in provideList"
                      :key="item.province_id"
                      class="right_btn_item"
                      v-show="queryParams.province_id == item.province_id"
                    >
                      <span :class="'active'"> {{ item.name }} </span>
                    </span>
                    <span
                      v-for="item in yearsList"
                      :key="item.id"
                      class="right_btn_item"
                      v-show="queryParams.year === item.id"
                    >
                      <span :class="'active'"> {{ item.label }} </span>
                    </span>
                    <template v-if="userInfo">
                      <template v-if="userInfo.majorType != 3">
                        <span
                          v-for="item in selectMajorList.options[0].subjects"
                          :key="item"
                          class="right_btn_item"
                          v-show="queryParams.subject === item"
                        >
                          <span :class="'active'"> {{ item }} </span>
                        </span>
                      </template>
                      <template v-else>
                        <span
                          class="right_btn_item"
                          v-show="userInfo.majorType == 3"
                        >
                          <span :class="'active'"> 综合 </span>
                        </span>
                      </template>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="center_data">
            <div class="data_score">
              <div class="title">分数</div>
              <div class="value">{{ centerData.score }}</div>
            </div>
            <div class="data_score">
              <div class="title">同分人数</div>
              <div class="value">{{ centerData.num }}</div>
            </div>
            <div class="data_score">
              <div class="title">位次区间</div>
              <div class="value">{{ centerData.rank_range }}</div>
            </div>
          </div>
          <div class="score_du">
            <div class="is_title">
              <div class="is_shu"></div>
              分数段
            </div>
            <div class="is_head el-row">
              <div class="el-col el-col-6">分数</div>
              <div class="el-col el-col-6">人数</div>
              <div class="el-col el-col-6">排位区间</div>
            </div>
            <div class="is_content el-row" v-for="(item, i) in list" :key="i">
              <div class="el-col el-col-6">
                <div>{{ item.score }}</div>
              </div>
              <div class="el-col el-col-6">
                <div>{{ item.num }}</div>
              </div>
              <div class="el-col el-col-6">
                <div>{{ item.rank_range }}</div>
              </div>
            </div>

            <pagination
              layout="prev, pager, next"
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="handleSearch"
            />
          </div>
        </div>
      </el-col>
      <el-col :span="5" :xs="24" :sm="5" v-if="device !== 'mobile'">
        <right-wrap></right-wrap>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
import rightWrap from "./components/rightWrap.vue";
import { EventBus } from "@/utils/eventBus";
import { province, schoolType, getScore, getMyScoreLevel } from "@/api/index";
import areaMajorData from "@/api/major.json";
import areaMajorOldData from "@/api/majorOld.json";
export default {
  name: "",
  components: { rightWrap },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
    }),
  },
  data() {
    return {
      provideList: [],
      yearsList: [
        { label: "2024", id: "2024" },
        { label: "2023", id: "2023" },
        { label: "2022", id: "2022" },
      ],
      subjectList: [],
      total: 0,
      queryParams: {
        page: 1,
        pageSize: 10,
        province_id: "",
        year: "",
        subject: "",
        batch_name: "",
      },
      score: "",
      form: {},
      list: [],
      userInfo: JSON.parse(localStorage.getItem("userScoreInfo")) || "",
      selectMajorList: null,
      centerData: {},
      majorType: null,
    };
  },
  created() {
    EventBus.$on("getUserScoreRakn", async (info) => {
      this.score = info.gk_score;
      this.queryParams.province_id = info.province_id;
      this.queryParams.year = this.yearsList[0].id;
      this.queryParams.subject = JSON.parse(info.setMajor)[0][0];
      this.majorType = info.majorType;
      this.handleSearchBtn();
      await this.getdict();
      this.handleSearch();
    });
  },
  async mounted() {
    if (this.userInfo) {
      this.score = this.userInfo.gk_score;
      this.queryParams.province_id = this.userInfo.province_id;
      this.queryParams.year = this.yearsList[0].id;
      this.queryParams.subject = JSON.parse(this.userInfo.setMajor)[0][0];
      this.majorType = this.userInfo.majorType;
      this.handleSearchBtn();
    }
    await this.getdict();
    this.handleSearch();
  },
  methods: {
    async getdict() {
      return new Promise((resolve, reject) => {
        province().then((response) => {
          this.provideList = response.data;
          resolve();
        });
      });
    },
    /*
     * author：Gengbaodada
     * create by date：2025/05/13
     * content：匹配数据
     */
    async ppMajorData(id) {
      return new Promise((resolve, reject) => {
        // if (this.queryParams.year === "2025") {
        //   let areaName = this.provideList.find((e) => e.province_id == id).name;
        //   this.selectMajorList = areaMajorData.find((item) =>
        //     item.provinces.includes(areaName)
        //   );
        // } else {
        let areaName = this.provideList.find((e) => e.province_id == id).name;
        this.selectMajorList = areaMajorOldData.find((item) =>
          item.provinces.includes(areaName)
        );
        // }

        if (this.selectMajorList.type === 3) {
          this.queryParams.subject =
            this.selectMajorList.options[0].subjects[0];
          this.majorType =
            this.selectMajorList.options[0].subjects[0] == "物理"
              ? "2073"
              : "2074";
        } else if (this.selectMajorList.type === 4) {
          console.log("44444444");
          this.queryParams.subject =
            this.selectMajorList.options[0].subjects[0];
          this.majorType =
            this.selectMajorList.options[0].subjects[0] == "文科" ? "2" : "1";
          console.log(" this.majorType", this.majorType);
        } else {
          this.majorType = "3";
        }
        resolve();
      });
    },
    async handleSearch(type) {
      if ((this.userInfo, type != 1)) {
        await this.ppMajorData(this.queryParams.province_id);
      }
      var queryParams = {};
      queryParams.score = this.score;
      queryParams.page = this.queryParams.page;
      queryParams.pageSize = this.queryParams.pageSize;
      queryParams.year = this.queryParams.year;
      queryParams.batch_name = this.queryParams.subject;
      queryParams.province_id = this.queryParams.province_id;
      queryParams.type = this.majorType;
      console.log("query", queryParams);
      this.getList(queryParams);
    },
    getList(queryParams) {
      getScore(queryParams).then((response) => {
        this.list = response.data.data;
        this.total = response.data.total;
      });
    },
    handleSearchBtn() {
      if (!this.score) {
        return this.$message.warning("请输入分数！");
      }
      let params = {
        score: this.score || "",
        province_id: this.queryParams.province_id || "",
        type: this.majorType || "",
        year: this.queryParams.year || "",
      };
      getMyScoreLevel(params).then((res) => {
        if (res.data) {
          this.centerData = res.data;
        } else {
          this.centerData = {
            score: this.score,
            rank_range: 1000,
            num: 0,
          };
        }
      });
    },
    yearsListClick(row) {
      this.queryParams.page = 1;
      console.log("selectMajorList.options[0]", this.selectMajorList);
      this.queryParams.year = row.id;
      this.handleSearch();
    },
    subjectListClick(row) {
      this.queryParams.page = 1;
      console.log("row", row);
      switch (row) {
        case "物理":
          this.majorType = "2073";
          break;
        case "历史":
          this.majorType = "2074";
          break;
        case "文科":
          this.majorType = "2";
          break;
        case "理科":
          this.majorType = "1";
          break;
        case "综合":
          this.majorType = "3";
          break;

        default:
          break;
      }

      this.queryParams.subject = row;
      console.log("2222222", this.queryParams.subject);
      this.handleSearch(1);
    },
    //地域
    async provideListClick(row) {
      this.queryParams.page = 1;
      this.queryParams.province_id = row.province_id;
      await this.ppMajorData(row.province_id);
      this.handleSearch();
    },
  },
};
</script>

<style scoped lang="scss">
.center_data {
  display: flex;
  height: 80px;
  border-radius: 10px;
  width: 100%;
  background: #fff;
  .data_score {
    width: calc(100% / 3);
    text-align: center;
    .title {
      margin-top: 10px;
      font-size: 18px;
    }
    .value {
      font-size: 14px;
      color: #ff592f;
      font-weight: 600;
      margin-top: 10px;
    }
  }
}
.suggest-container {
  padding: 20px 0;
  height: 100%;
}

.config_box {
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
}

.config_box .top_type {
  width: 100%;
  height: 56px;
  padding: 12px 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.config_box .top_type .sort_item {
  height: 32px;
  padding: 0 12px;
  line-height: 32px;
  letter-spacing: 0.56px;
  border-radius: 4px;
  margin-right: 21px;
  cursor: pointer;
}

.config_box .top_type .active {
  color: #fff;
  font-weight: 700;
  background-color: #ff6a44;
}

.config_box .top_config,
.config_box .top_selected {
  padding: 16px 14px;
}

.config_box .top_config .config_search,
.config_box .top_selected .config_search {
  width: 360px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #efefef;
  background: #f9fafa;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
}

.config_box .top_config .config_search .check_btn,
.config_box .top_selected .config_search .check_btn {
  width: 120px;
  height: 100%;
  background-color: #ff6a44;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.config_box .top_config .config_search input[type="text"],
.config_box .top_selected .config_search input[type="text"] {
  padding-left: 10px;
  width: 240px;
  height: 100%;
  outline: none;
  border: none;
}

.config_box .top_config .top_config,
.config_box .top_selected .top_config {
  border-bottom: 2px solid #eff0f0;
}

.config_box .top_config .config_year,
.config_box .top_selected .config_year {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.config_box .top_config .config_year .is_choose_year,
.config_box .top_selected .config_year .is_choose_year {
  width: 100px;
  height: 34px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.config_box .top_config .config_item,
.config_box .top_selected .config_item {
  display: flex;
  justify-content: flex-start;
}

.config_box .top_config .config_item .item_left,
.config_box .top_selected .config_item .item_left {
  width: 58px;
  color: #9ca1a6;
  margin-right: 12px;
}

.config_box .top_config .config_item .item_right,
.config_box .top_selected .config_item .item_right {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.config_box .top_config .config_item .item_right .item_btn,
.config_box .top_selected .config_item .item_right .item_btn {
  color: #0478f1;
  font-weight: 600;
  font-size: 14px;
  margin: 10px 20px 0 8px;
  cursor: pointer;
}

.config_box .top_config .config_item .item_right .right_btn_item,
.config_box .top_selected .config_item .item_right .right_btn_item {
  color: #606166;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.config_box .top_config .config_item .item_right .right_btn_item span,
.config_box .top_selected .config_item .item_right .right_btn_item span {
  padding: 2px 8px;
}

.config_box .top_config .config_item .item_right .right_btn_item .active,
.config_box .top_selected .config_item .item_right .right_btn_item .active {
  background-color: rgba(201, 225, 251, 0.5);
  color: #0478f1;
}

.config_box .top_selected {
  width: 100%;
  border-top: 2px solid #eff0f0;
  padding: 12px 16px;
}

.config_box {
  margin-bottom: 20px;
}

.is_score_info {
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.is_score_info .is_score_item {
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.is_score_info .is_score_item .item_title {
  font-size: 18px;
}

.is_score_info .is_score_item .item_info {
  font-size: 14px;
  color: #0478f1;
  font-weight: 600;
  margin-top: 10px;
}

.score_du {
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
}

.score_du .is_page {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.score_du .is_head {
  border-bottom: 1px solid #f6f7f7;
  padding: 5px 0;
  margin-top: 20px;
}

.score_du .is_content {
  color: #000;
  padding: 10px 0;
  border-bottom: 1px solid #f6f7f7;
}

.score_du .is_title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.score_du .is_title .is_shu {
  width: 4px;
  height: 20px;
  background-color: #fe6a11;
  border-radius: 3px;
  margin-right: 10px;
}
</style>
